<template>
    <div class="header">
        <div class="main">
            <p style="display: inline-block">钱包金额：￥{{this.balance}}</p>
            <el-button type="info" round @click="buy">充值</el-button>
            <el-button type="info" round>明细</el-button>
        </div>
        <div class="header-right">
            <div class="btn-fullscreen" @click="handleFullScreen">
                <el-tooltip :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                    <i class="el-icon-rank"></i>
                </el-tooltip>
            </div>
            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{userName}}
                    <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="goMyMessage">账号设置</el-dropdown-item>
                    <el-dropdown-item  command="update">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

    </div>
</template>

<script>
import {getBalance, recharge} from "../api";
export default {
  inject:["reload"],
  name: "TheHeader",
  data() {
    return {
      fullscreen: '',
      userName: '',
      balance :'',
    }
  },
  methods: {
    //全屏事件
    handleFullScreen() {
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {      //safari 、Chrome
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {        //firefox
          document.mozCancelFullScreen();
        } else if (document.msExitFullScreen) {            //ie
          document.msExitFullScreen();
        }
      } else {
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {      //safari 、Chrome
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {         //firefox
          element.mozRequestFullScreen();
        } else if (element.msRequestFullScreen) {         //ie
          element.msRequestFullScreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    handleCommand(command) {
      if (command === "logout") {
        const _this = this
        this.$axios.get('http://localhost:8888/logout', {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then((res) => {
          localStorage.setItem("userInfo",'');
          localStorage.setItem("loginAuto",'')
          sessionStorage.setItem("userInfo", JSON.stringify(''))
          localStorage.setItem("token","")
          _this.$store.commit("setvisiable",0);
          console.log(_this.$store.getters.getvisiable);
          _this.$store.commit('REMOVE_INFO')
          _this.$router.push('/')
        });
      }
      if( command === "update"){
        this.reload()
        this.$store.commit("setvisiable",1);
      }
      if( command==="goMyMessage"){
        const my = {name:"我的",path:"message"}
        this.$store.commit("setBreadList",my)
        this.$router.push('/message')
      }
    },
    buy(){
      const users = JSON.parse(localStorage.getItem("userInfo"));
      recharge(this.$store.getters.getUser.id).then((res)=>{
        //实时拿到用户数据
        getBalance(users.id).then((res) =>{
          this.balance = res.data;
        })
        this.$message.success("充值成功")
      })
    }
  },
  created() {
   const users = JSON.parse(localStorage.getItem("userInfo"));
    this.userName = users.username

    //实时拿到用户数据
    getBalance(users.id).then((res) =>{
      this.balance = res.data;
    })
  },
}
</script>

<style scoped>
    .main {
        height: 50px;
        line-height: 50px;
        float: left;
        margin-left: 260px;
    }

    p {
        margin: 3px 15px;
    }

    .header-right {
        float: right;
        /*padding-right: 50px;*/
        display: flex;
        height: 50px;
        align-items: center;
    }

    .btn-fullscreen {
        transform: rotate(45deg);
        font-size: 30px;
        height: 50px;
        line-height: 50px;
    }

    .user-name {
        margin-left: 20px;
    }

    .el-dropdown-link {
        float: right;
        color: #ffffff;
        cursor: pointer;
    }
</style>
